<template>
  <div class="app-wrapper" :class="{hideSidebar:sidebar.isCollapse}">
    <layout-sidebar class="sidebar-container"></layout-sidebar>
    <div class="main-container">
      <layout-header></layout-header>
      <layout-main class="app-container"></layout-main>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import LayoutHeader from 'components/Layout/header'
import LayoutSidebar from 'components/Layout/sidebar'
import LayoutMain from 'components/Layout/main'

export default {
  components: {
    LayoutHeader,
    LayoutSidebar,
    LayoutMain
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    }
  }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import '../styles/mixin.styl'
  .app-wrapper
    @include clearfix position relative height 100% width 100%
</style>
